<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>My Demo App</title>
		<script src="prototype.js" type='text/javascript'></script>
		<script src="effects.js" type='text/javascript'></script>
		<script src="dragdrop.js" type='text/javascript'></script>
		<style>
			#drag {
				width: 100px;
				height: 30px;
				border: solid 1px black;
				cursor: pointer;
			}
			#drop {
				width: 100px;
				height: 30px;
				border: solid 1px blue;
				float: right;
			}
			.hover {
				background-color: green;
			}
		</style>
		<script type='text/javascript'>
			document.observe("dom:loaded", function() {
	  			$("typehere").observe("keyup",function(){
					$("seewhatyoutyped").innerHTML = ("typed "+this.value)
				})
				$("typehere").value = "";
				$("copy").observe("click",function(){
					$("seewhatyoutyped").innerHTML = ("copied "+$("typehere").value)
				});
				var counts = 0;
				new Draggable('drag', {revert: true});
				Droppables.add('drop',{
					hoverclass: "hover",
					onDrop : function(drag, drop){
						drop.innerHTML = "Drags "+(++counts)
					}
				})
			});

			out = function(text){
				$("outer").innerHTML = $("outer").innerHTML + text + "<br/>"
			}
		</script>
		
	</head>
	<body>
		<h2>FuncUnit Demo</h2>
		<h2>Type Something and Click Copy to see it below:</h2>
		<input id="typehere"/><input type='submit' value="Copy" id='copy'/>
		<p id='seewhatyoutyped'></p>
		<h2>Drag Drop</h2>
		<div id='drag'>Drag Me</div>
		<div style='width: 500px'>
			<div id='drop'>Drop Here</div>
		</div>
		<pre id='outer'></pre>
	</body>
</html>
